<script>
import { getList } from '@/api/system/user'
export default {
  name: 'LeadingCadre',
  props: {
    value: String,
    loading: { type: Boolean, default: false },
    on: { type: Object, default: null }
  },
  data: () => ({
    options: [],
    states: [],
    list: [],
    page: {
      pageSize: 10,
      currentPage: 1,
      total: 0
    }
  }),
  created() {
    this.init()
  },
  methods: {
    async init() {
      try {
        // const { data } = await getClassifyTree()
        // this.options = data.data
        getList(this.page.currentPage, this.page.pageSize, Object.assign({}, this.query), '').then(res => {
          const data = res.data.data
          this.page.total = data.total
          this.states = data.records
          this.list = this.states.map(item => {
            return { value: item.name, label: item.name }
          })
        })
      } catch (error) {
        console.log(error)
      }
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    }
  },
  render(h) {
    let options = this.options.map(item => {
      console.log(item)
      return h('el-option', {
        props: {
          value: item.value,
          label: item.label
        }
      })
    })
    return h(
      'el-select',
      {
        props: {
          value: this.value,
          filterable: true,
          remote: true,
          reserveKeyword: true,
          clearable: true,
          loading: this.loading,
          remoteMethod: this.remoteMethod
        },
        attrs: { placeholder: '请选择负责人' },
        on: this.on || {
          ...this.$listeners,
          change: value => this.$emit('input', value)
        }
      },
      options
    )
  }
}
</script>
